<template>
  <div class="pathPlanContent">
    <div class="content">
      <div class="searchBox">
        <el-form ref="form" label-position="left" label-width="auto" @submit.native.prevent>
          <div class="serFlexBox">
            <div class="inputBox">
              <el-row :gutter="12" style="display: flex;flex-wrap: wrap;">
                <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="6">
                  <el-form-item label="设备状态">
                    <el-select v-model="isOnline" clearable popper-class="eloption" style="width: 95%">
                      <el-option value="1" label="在线" />
                      <el-option value="0" label="离线" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
            <div class="btnBox">
              <el-button @click.stop="searchFn" class="searchBtn" icon="el-icon-search">搜索</el-button>
              <el-button @click.stop="emptyFn" class="resetBtn" icon="el-icon-refresh-right">重置</el-button>
            </div>
          </div>
        </el-form>
      </div>
      <div class="num">
        <span>门店总数：{{ mapData.length }}</span>
        <span>在线设备数：{{ onLine }}</span>
        <span>离线设备数：{{ offline }}</span>
        <span>故障设备数：{{ fault }}</span>
      </div>
      <div class="mapCon">
        <div id="container" class="mapWidth">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqStoreGPSList } from '@/api/report'
import AMapLoader from '@amap/amap-jsapi-loader'
window._AMapSecurityConfig = {
  securityJsCode: '57a18aafb55064088272e9831ab8aa35' // 安全密钥
}
export default {
  name: 'PathPlan',
  data() {
    return {
      input4: '',
      mapData: [],
      map: null,
      onLine: 0,
      offline: 0,
      fault: 0,
      isOnline: '',
      isSearch: false
    }
  },
  created() {
    this.reqStoreGPSList()
  },
  methods: {
    async reqStoreGPSList() {
      const res = await reqStoreGPSList({ isOnline: this.isOnline })
      if (res.code == 200) {
        console.log('位置', res.data);
        this.mapData = res.data.filter(item => item.name !== "线上门店");
        let onLine = 0, offline = 0, fault = 0;
        this.mapData.forEach(item => {
          onLine += item.onLine;
          offline += item.offline;
          fault += item.fault;
        })
        this.onLine = onLine;
        this.offline = offline;
        this.fault = fault;
        this.initMap()
      }
    },
    searchFn() {
      this.isSearch = true
      this.reqStoreGPSList()
    },
    emptyFn() {
      this.isSearch = false
      this.isOnline = ''

      this.reqStoreGPSList()
    },
    initMap() {
      const MAP_PLUGINS = ["AMap.Marker"];
      AMapLoader.load({
        key: "7ce880f2976149e9e8f24e51b0c34084",
        version: "2.0",
        plugins: MAP_PLUGINS,
      })
        .then((AMap) => {
          const map = new AMap.Map("container", {
            viewMode: "3D", //是否为3D地图模式
            terrain: true,
            zoom: 10,
            zooms: [7, 20],
            center: [113.658405, 34.741777],  //地图初始展示中心位置
            mapStyle: 'amap://styles/normal',
            features: ['road', 'point'],
          });
          this.map = map;
          // 创建点标点
          // this.createMarkers();
          this.markPoints()
        })
        .catch((error) => {
          // console.log(error);
        });
    },
    markPoints() {
      this.mapData.forEach(item => {
        // 创建一个 Marker 实例：
        const icon = new AMap.Icon({
          size: new AMap.Size(30, 30), //图标尺寸
          type: 'image',
          image: "storeIcon.png", //Icon 的图像
          // size: [30, 30],
          // imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量，适于雪碧图等
          imageSize: new AMap.Size(30, 30),
          // 图片相对 position 的锚点，默认为 bottom-center
          anchor: 'center',
        });
        const marker = new AMap.Marker({
          position: new AMap.LngLat(item.longitude, item.latitude),
          offset: new AMap.Pixel(-13, -30), //偏移量
          icon: icon, //添加 Icon 实例
          // title: item.name,
          label: {
            // 要展示的文字内容
            content: item.name,
            // 文字方向，有 icon 时为围绕文字的方向，没有 icon 时，则为相对 position 的位置
            direction: 'top',
            // 在 direction 基础上的偏移量
            offset: [0, -5],
            // 文字样式
            style: {
              // 字体大小
              fontSize: 16,
              // 字体颜色
              fillColor: 'red',
              strokeColor: '#fff',
              strokeWidth: 2,
              fold: false,
              padding: '2, 5',
            }
          }
          // zooms: [2, 12],  // 经纬度对象，也可以是经纬度构成的一维数组[lng, lat]
        });
        // 将创建的点标记添加到已有的地图实例：
        this.map.add(marker);
        this.map.setFitView();
        //给标记点添加事件
        marker.on('click', (e) => {
          this.setInfoWindows(e, item)
        })
      });
    },
    //显示的弹出框组件
    setInfoWindows(e, item) {
      console.log(item)
      // 信息窗体的内容
      let content = [
        // e.pos[0],e.pos[1],
        `<div style='\'padding:0px' 0px = '' 4px; \'=''><b>${item.name}</b>`,
        `联系人 ：${item.storeUser ? item.storeUser : '无'}，电话 ：${item.storePhone ? item.storePhone : '无'}`,
        `设备 ：在线${item.onLine}台，离线：${item.offline}台，故障：${item.fault}台`,
        `地址 : ${item.address}</div></div>`,
        // `<img src=${item.img} alt="" style="width: 100px;height: 100px">`
      ];
      // 创建 infoWindow 实例	
      let infoWindow = new AMap.InfoWindow({
        content: content.join("<br>"),  //传入 dom 对象，或者 html 字符串
        offset: [0, -55]
      });
      // 打开信息窗体
      let dd = this.map.getCenter()
      // dd.pos = [e.pos[0], e.pos[1]]
      dd.lat = item.latitude
      dd.lng = item.longitude
      console.log(dd)
      infoWindow.open(this.map, dd);
    },
    //点击获取经纬度
    latitude() {
      this.map.on('click', function (ev) {
        // console.log(ev)
        // 触发事件的对象
        let target = ev.target;
        // 触发事件的地理坐标，AMap.LngLat 类型
        let lnglat = ev.lnglat;
        // 触发事件的像素坐标，AMap.Pixel 类型
        let pixel = ev.pixel;
        // 触发事件类型
        let type = ev.type;
        console.log(target, lnglat, pixel, type)
      });
    },
  }
}
</script>

<style scoped lang='scss'>
.pathPlanContent {
  padding: 10px;
  height: 100%;

  // color: aliceblue;
  .content {
    display: flex;
    padding: 10px;
    // min-height: 700px;
    height: 100%;
    background-color: #fff;
    flex-direction: column;

    .searchBox {
      height: 100px;
      border-bottom: 1px solid #e7e6e6;
    }

    .num {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      margin-bottom: 10px;
    }

    .mapCon {
      width: 100%;
      // height: 700px;
      flex: 1;
      border: 1px solid #ccc;

      // padding: 20px;
      .mapWidth {
        width: 100%;
        // height: 700px;
        height: 100%;
      }

      .btnBox {
        line-height: 80px;
        text-align: right;
        padding-right: 30px;
      }
    }

    .listCon {
      border: 1px solid #ccc;
      height: 700px;
      // width: 40%;
      flex: 1;
      padding: 10px;
      display: flex;
      // flex-wrap: wrap;
      flex-direction: column;

      .inputBox {
        width: 100%;
        height: 50px;
      }

      .list {
        width: 100%;
        flex: 1;
        border: 1px solid #ccc;
        margin-bottom: 10px;
      }

      .pageBox {
        width: 100%;
        height: 30px;
        text-align: center;
      }
    }
  }
}

// ::v-deep .number{
//   background-color: #ccc;
//   border-radius: 50%;
// }
</style>
